<template>
  <div v-show="isShow" class="weapon-sprite-list">
    <FSMask>
      <div class="list flex flex-wrap bd-line mask">
        <div class="item bd-line" v-for="item in data" :key="item">
          <img :src="item" @click="changeCurrent(item)" alt />
        </div>
      </div>
    </FSMask>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import FSMask from '../../common/FSMask.vue'
export default {
  components: { FSMask },
  emits: ['change'],
  props: ['data'],
  setup(props, context) {
    const state = reactive({
      ...props,
      current: props.data[0],
      isShow: false
    })
    const changeCurrent = (item) => {
      state.curent = item
      context.emit('change', item),
        state.isShow = false
    }

    return {
      ...toRefs(state),
      changeCurrent
    }
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>
.weapon-sprite-list {
  .list {
    background-color: #ccc;
    max-width: 80vw;
    min-height: 60vh;
    border-radius: 6px;
    padding: 10px;
  }
  .item {
    border-radius: 4px;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    img {
      border-radius: 4px;
    }
  }
}
</style>